<template>
	<div id="tableRCIM">
		<!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
			<el-table
				:data="tableData"
				border
				:height="tableHeight"
				:loading="listLoading"
				:cell-class-name="cellClassName"
			>
				<el-table-column
					v-if="showIndex"
					prop="index"
					:label="indexLabel"
					width="80"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.$index + (page - 1) * limit + 1 }}
					</template>
				</el-table-column>
				<el-table-column
					ref="tableColum"
					v-for="item in tableHead"
					:key="item[propKey.prop]"
					:prop="item[propKey.prop]"
					:label="item[propKey.label]"
					:width="item.width"
					:sortable="item.sortable"
					:show-overflow-tooltip="true"
					:align="item.align"
					:fixed="item.fixed"
				>
					<template slot-scope="{ row }">
						<slot
							v-if="isUseSlot"
							:data="{ col: item, row }"
						></slot>
						<div class="table-cell" v-else >
							<div v-if="item[propKey.prop] === 'operate'">
								<slot name="tool" :data="{ col: item, row }">
									<el-button
										type="text"
										style="padding:0 3px"
										icon="el-icon-search"
										@click="handleEdit(row)"
										>查看</el-button
									>
								</slot>
							</div>
							<span v-else>{{
								row[item[propKey.prop]] | defaultVal
							}}</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
		<!-- </el-scrollbar> -->
	</div>
</template>

<script>
import Scrollpane from "@/components/luyiming/ScrollPane/ScrollPane";
export default {
	components: {
		Scrollpane
	},
	data() {
		return {
			indexLabel: "序号",
			Height: ""
		};
	},
	props: {
		// 表格数据
		tableData: {
			type: Array,
			default: () => []
		},
		// 表格头数据
		tableHead: {
			type: Array,
			default: () => []
		},
		// 表格高度
		tableHeight: {
			type: [String, Number],
			default: () => "calc(100vh - 410px)"
		},
		// 表头键名替换
		propKey: {
			type: Object,
			default:() => {
				return {prop: "prop", label: "label"}
			 }
		},
		// 是否使用插槽，false则显示默认表格数据
		isUseSlot: {
			type: Boolean,
			default: false
		},
		// 是否显示序号
		showIndex: {
			type: Boolean,
			default: true
		},
		listLoading: {
			type: Boolean,
			default: false
		},
		// 页数
		page: {
			type: Number,
			default: 1
		},
		// 每页条数
		limit: {
			type: Number,
			default: 10
		}
	},
	watch: {
		tableHead(headData) {
			this.insteadIndex(headData);
		},
		tableData(data) {
			console.log(this.$refs.tableColum[0].offsetHeight);

			// this.Height
		}
	},
	created() {
		this.insteadIndex(this.tableHead);
		this.Height = this.tableHeight;
	},
	filters: {
		// 过滤空值，若为空值则显示'-'
		defaultVal(value) {
			if (!value && value !== 0) return "-";
			value = value.toString();
			return value;
		}
	},
	methods: {
		handleEdit(row) {
			this.$emit("handleEdit", row);
		},
		insteadIndex(headData) {
			if (headData[0][this.propKey.prop] === "index") {
				this.indexLabel = headData[0][this.propKey.label];
				headData.shift();
				this.tableHead = headData;
				console.log(headData);
			}
		},
		cellClassName({row, column}){
			return row.cellClass && (column.property === 'sourceNumber' || column.property === 'sourceRealNumber') ? row.cellClass : ''
		}
	}
};
</script>

<style lang="scss">
#tableRCIM {

.el-scrollbar {
  height: 100%;
}
.el-scrollbar__wrap {
  overflow: scroll;
  overflow-x:auto
}
	.el-table th {
		background: #d5e9fa;
		font-weight: 400;
		color: #333;
	}
	.table-cell {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.el-table td,
	.el-table th.is-leaf {
		border-bottom: 1px solid rgb(221, 220, 220);
	}

	.el-table--border th,
	.el-table--border th.gutter:last-of-type {
		border-bottom: 1px solid rgb(221, 220, 220);
	}

	.el-table--border td,
	.el-table--border th {
		border-right: 1px solid rgb(221, 220, 220);
	}
	padding: 6px 0;
	// element表格滚动条的宽度
	// .el-table__body-wrapper::-webkit-scrollbar {
	// 	width: 6px; // 横向滚动条
	// 	height: 6px; // 纵向滚动条 必写
	// }
	// // element表格滚动条的滑块
	// .el-table__body-wrapper::-webkit-scrollbar-thumb {
	// 	background-color: #ddd;
	// 	border-radius: 3px;
	// }

	// .el-table__body-wrapper::-webkit-scrollbar-track {
	// 	box-shadow: inset 0 0 5px rgba(240, 238, 238, 0.2);
	// 	border-radius: 3px;
	// 	background: rgba(240, 238, 238, 0.4);
	// }
}
</style>
